<template>
	<view class="page_content">
		<!-- banner -->
		<view class="banner_box">
			<u-swiper :list="banner" keyName="image_src" :circular="true" indicator></u-swiper>
		</view>
		<!-- 导航栏 -->
		<u-gap bgColor="transparent" height="10"></u-gap>
		<view class="nav_box">
			<view class="nav_item" v-for="(item,index) in nav" :key="item.id"
				@click="pageJump({url:item.navigator_url,openType:item.open_type})">
				<image class="nav_image" :src="item.image_src" mode="widthFix"></image>
				<view class="nav_title">{{item.name}}</view>
			</view>
		</view>
		<u-gap bgColor="transparent" height="10"></u-gap>
		<!-- 公告 -->
		<view class="notice">
			<u-row>
				<u-col span="2" class="notice_left">
					<u--image radius="4"
						src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
						width="50px" height="50px" mode="aspectFill"></u--image>
				</u-col>
				<u-col span="9">
					<view class="notice_title">
						<u--text :lines="1"
							text="关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。"></u--text>
					</view>
					<text class="notice_text">2小时前</text>
				</u-col>
				<u-col span="1" class="notice_to">
					<u-icon name="arrow-right" color="#8f9ca2"></u-icon>
				</u-col>
			</u-row>
		</view>
		<u-gap bgColor="transparent" height="10"></u-gap>
		<!-- 成功案例 -->
		<view class="success_demo">
			<view class="success_demo_header">
				<u-row class="notice">
					<u-col span="10">
						<text>成功案例</text>
					</u-col>
					<u-col span="2">
						<u--text suffixIcon="arrow-right" text="更多" color="#8f9ca2"></u--text>
					</u-col>
				</u-row>
			</view>
			<u-row class="success_demo_list">
				<u-col span="9">
					<view class="notice_title">
						<u--text :lines="2"
							text="关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。"></u--text>
					</view>
					<text class="notice_text">2小时前</text>
				</u-col>
				<u-col span="3">
					<u--image radius="4"
						src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
						width="80px" height="50px" mode="aspectFill"></u--image>
				</u-col>
			</u-row>
			<u-row class="success_demo_list">
				<u-col span="9">
					<view class="notice_title">
						<u--text :lines="2"
							text="关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。"></u--text>
					</view>
					<text class="notice_text">2小时前</text>
				</u-col>
				<u-col span="3">
					<u--image radius="4"
						src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
						width="80px" height="50px" mode="aspectFill"></u--image>
				</u-col>
			</u-row>
			<u-row class="success_demo_list" v-for="v in 10">
				<u-col span="9">
					<view class="notice_title">
						<u--text :lines="2" text="关于uView   也对它们表示感谢。"></u--text>
					</view>
					<text class="notice_text">2小时前</text>
				</u-col>
				<u-col span="3">
					<u--image radius="4"
						src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
						width="80px" height="50px" mode="aspectFill"></u--image>
				</u-col>
			</u-row>

		</view>
	</view>


</template>

<script>
	import {
		indexDAO
	} from "netword/index.js"


	export default {
		components: {},
		data() {
			return {
				banner: [],
				nav: [],
			}
		},
		onLoad() {
			this.banner = indexDAO.getBanner()
			this.nav = indexDAO.getNav()
			console.log(this.$util);
		},
		methods: {
			pageJump(obj = {
				url: "/pages/emptyPage/emptyPage"
			}) {
				console.log("页面跳转", obj);
				switch (obj.openType) {
					case "switchTab":
						uni.switchTab(obj)
						break;
					default:
						uni.navigateTo(obj)
						break;
				}

			}
		}
	}
</script>


<style lang="scss" scoped>
	.page_content {
		padding: 10rpx;


		.nav_box {
			.nav_item {
				overflow: hidden;
				width: 25%;
				display: inline-block;
				text-align: center;

				.nav_image {
					width: 90rpx;
					height: 90rpx;
				}

				.nav_title {
					font-size: 23rpx;
					font-weight: bold;
				}
			}
		}


		.notice {
			background: #ffffff;
			border-radius: 10rpx;
			padding: 10rpx;
			height: 100rpx;

			.notice_left {
				// display: inline-block;
				// width: 80rpx;
				// height: 80rpx;
				// background-color: red;
				height: 100rpx;
			}



			.notice_to {
				.u-icon {
					flex-direction: row-reverse;
				}

			}

		}

		.success_demo {
			background: white;
			border-radius: 10rpx;
			padding: 10rpx;

			.success_demo_list {
				height: 150rpx;
				border-bottom: 1px solid #dee1e6;
			}
		}


	}
</style>